<template>
	<div class="index-container">
		<el-container class='index-box'>
			<!-- 侧栏 -->
			<el-aside style="height:100vh; width: auto !important;background-color: #545c64;">
				<div class="sidebar">
					<el-menu :default-active="defaultRoute" :unique-opened='true' class="el-menu-vertical-demo" @open="handleOpen"
					 @close="handleClose" :collapse="isCollapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff"
					 :router="true">
					     <template v-for="item in asideList">
							 <el-menu-item v-if="!(item.children)" :index="item.index" @click='getPath(item)'>
								<i :class="item.icon"></i>
								<span slot="title">{{item.title}}</span>
							 </el-menu-item>
							 <el-submenu v-if="item.children" :index="item.index">
								<template slot="title">
									<i :class="item.icon"></i>
									<span slot="title">{{item.title}}</span>
								</template>
								<el-menu-item v-for="childItem in item.children" :index="childItem.index"  @click='getPath(childItem)'>{{childItem.title}}</el-menu-item>
							 </el-submenu>
						 </template>
					</el-menu>
				</div>
			</el-aside>
			<el-container class='right_container'>
				<el-header>
					<div class="header">
						<!-- 左边 -->
						<div class="left-menu">
							<div class="menu-icon-left">
								<span v-model="isCollapse" @click="open" class='el-icon-s-fold' :class="isCollapse?'headers-left-active':''"></span>
							</div>
							<!-- 面包屑 -->
							<el-breadcrumb separator-class="el-icon-arrow-right">
								<el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
								<el-breadcrumb-item v-for="(item, index) in breadList" :key="index">
									{{item}}
								</el-breadcrumb-item>
							</el-breadcrumb>
						</div>
						<!-- 右边 -->
						<div class="right-menu">
							<div class="right-menu-box">
								<!-- 全屏 -->
								<el-tooltip class="item" effect="dark" :content="isFullscreen ? `全屏` : `取消全屏`" placement="bottom">
									<i class="el-icon-full-screen" @click="toggleFullScreen($event)"></i>
								</el-tooltip>
								<!-- 换肤 -->
								<el-tooltip class="item" effect="dark" content="换肤" placement="bottom">
									<theme-picker />
								</el-tooltip>
								<!--中英文切换  -->
								<el-tooltip class="item langue" effect="dark" content="中英文切换" placement="bottom">
									<el-dropdown trigger="click">
										<img src="../images/langue.png" style="width: 50px; height: 50px;" />
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item>中文</el-dropdown-item>
											<el-dropdown-item>English</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</el-tooltip>
								<!-- 登录 -->
								<el-dropdown trigger="click">
									<span class="el-dropdown-link">
										<span class="el-avatar el-avatar--large el-avatar--square"></span>
										<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item>首页</el-dropdown-item>
										<el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>
					</div>
				</el-header>
				<el-main>
					<div class="nav_container">
						<my-tag :tagsList='tagsList' @delRouter="delRouter" @closeOthers="closeOthers" @closeAll="closeAll"></my-tag>
					</div>
					<div class="main-content">
						<router-view />
					</div>
				</el-main>
			</el-container>
		</el-container>
		<el-backtop target=".main-content" :bottom='100'>
			<div class="scrollTop">
				<i class="el-icon-s-home"></i>
			</div>
		</el-backtop>
	</div>
</template>
<script>
	import ThemePicker from '@/components/ThemePicker';
	import Cookies from "js-cookie";
	export default {
		components: {
			ThemePicker
		},
		data: function() {
			return {
				isCollapse: false, //侧栏展开
				breadList: [], //面包屑list
				tagsList: [], //标签list
				isFullscreen: true, //全屏
				path: '', //当前路由
				asideList: [ //侧栏list
				{
					title: '首页',
					index: '/dashboard',
					icon: 'el-icon-s-home'
				}, {
					title: '运营管理',
					icon: 'el-icon-s-data',
					index:'1',
					children: [{
							title: '订单管理',
							index: '/operate/ordermanage',
						},{
							title: '评论管理',
							index: '/operate/commentmanage',
						}, {
							title: '运费模板管理',
							index: '/operate/freightmanage',
						}],
				},{
					title: '商品管理',
					icon: 'el-icon-s-shop',
					index:'2',
					children: [{
							title: '商品列表',
							index: '/goods/goodslist',
						},{
							title: '商品类目',
							index: '/goods/goodscategory',
						}],
				},{
					title: '推广管理',
					icon: 'el-icon-s-help',
					index:'3',
					children: [{
							title: '商铺广告',
							index: '/promotion/shopadvert',
						},{
							title: '推荐管理',
							index: '/promotion/recommanage',
						},{
							title: '优惠券管理',
							index: '/promotion/couponmanage',
						},{
							title: '商铺信息',
							index: '/promotion/shopsmanage',
						}],
				},{
					title: '系统管理',
					icon: 'el-icon-s-tools',
					index:'4',
					children: [{
							title: '会员管理',
							index: '/system/usermanage',
						},{
							title: '管理员',
							index: '/system/adminlist',
						},{
							title: '角色管理',
							index: '/system/rolemanage',
						}],
				}]
			};
		},
		watch: {
			// 监听路由
			$route() {
				this.path = this.$route.fullPath;
				this.breadList = [];
				this.getBreadList(this.$route)
			},
		},
		methods: {
			handleOpen(key, keyPath) {
			},
			handleClose(key, keyPath) {
			},
			open() {
				this.isCollapse = !this.isCollapse;
			},
			// 面包屑
			getBreadList(val) {
				if (this.$route.fullPath === '/dashboard') {
					return;
				}
				if (val.matched) {
					for (let i = 1; i < val.matched.length; i++) {
						this.breadList.push(val.matched[i].name);
					}
				}
			},
			// 给标签去重
			getPath(item){
				let list = this.tagsList;
				let that = this;
				//先执行添加
				this.tagsList.push({
					index: item.index,
					title: item.title
				})
				for (let i = 0; i < list.length - 1; i++) {
					if (item.index === list[i].index) { //添加后有相同的
						list.pop(); //删除最后一个
						break; //跳过本次循环，进入下一趟循环
					}
				}
			},
			// 关闭
			delRouter(route) {
				let list = this.tagsList;
				let _this = this;
				list.forEach((item, num) => {
					// console.log(this.tagsList)
					if (this.tagsList.length == 1) {
						list.splice(num, 1) //删除
						this.tagsList.push({
							index: "/dashboard",
							title: "首页"
						})
						this.$router.push("/dashboard")
					} else if (item.index === route.index) { //在数组中如果和右击点中的路由有相同则删除并在前一个或后一个
						list.splice(num, 1)
						// console.log(item.path === route.index, _this.path)
						let router = list[num + 1] || list[num - 1];
						_this.path = router.index
						// console.log(router.index)
						this.$router.push(_this.path)

					}
				})
			},
			// 全屏
			FullScreen(el) {
				if (this.isFullscreen) { //退出全屏
					if (document.exitFullscreen) {
						document.exitFullscreen()
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen()
					} else if (document.webkitExitFullscreen) {
						document.webkitExitFullscreen()
					} else if (!document.msRequestFullscreen) {
						document.msExitFullscreen()
					}
				} else {
					if (el.requestFullscreen) {
						el.requestFullscreen()
					} else if (el.mozRequestFullScreen) {
						el.mozRequestFullScreen()
					} else if (el.webkitRequestFullscreen) {
						el.webkitRequestFullscreen();
					} else if (el.msRequestFullscreen) {
						this.isFullscreen = true;
						el.msRequestFullscreen()
					}
				}
			},
			toggleFullScreen(e) {
				this.isFullscreen = !this.isFullscreen;
				var el = document.documentElement || e.target;
				this.FullScreen(el);
			},
			// 关闭其他
			closeOthers(route) {
				this.tagsList = [];
				this.tagsList.push({
					index: route.index,
					title: route.title
				})
				this.$router.push(route.index)
				this.path = route.index;
			},
			// 关闭所有
			closeAll() {
				this.tagsList = [];
				this.$router.replace('/dashboard')
				this.tagsList.push({
					index: this.$route.fullPath,
					title: this.$route.name
				});
			},
			// 退出登录
			loginOut() {
				sessionStorage.clear();
				Cookies.remove("token");
				this.$router.push("/login");
			}
		},
		created() {
			this.tagsList.push({
				index: this.$route.fullPath,
				title: this.$route.name
			});
			this.path = this.$route.fullPath;
			this.getBreadList(this.$route);
		},
		computed: {
			defaultRoute() {
				return this.$route.path;
			}
		},
	}
</script>
<style lang="less" scoped>
	.index-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.index-box {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.main-content::-webkit-scrollbar {
		width: 0px;
		background-color: #f5f5f5;
		margin-top: 30px;
	}

	.main-content {
		width: 100%;
		height: calc(100% - 35px);
		overflow-x: hidden;
		overflow-y: auto;
		-ms-overflow-style: none;
		overflow: "-moz-scrollbars-none";
		scrollbar-width: none;
		background: #fff;
	}

	.main-content::-webkit-scrollbar {
		display: none;
		width: 0 !important;
	}

	.el-avatar {
		width: 40px;
		height: 40px;
		display: inline-block;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		background: #C0C4CC;
		line-height: 40px;
		font-size: 14px;
		border-radius: 6px;
	}

	.el-dropdown-link {
		align-items: center;
	}

	.el-dropdown {
		line-height: 15px;
		width: 70px;
		text-align: center;
	}

	.el-main {
		width: 100%;
		height: 100%;
		background-color: #E9EEF3;
		color: #333;
		padding: 0px !important;
	}

	.right_container {
		width: 100%;
		height: 100%;
		overflow: hidden !important;
	}

	.sidebar {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		overflow-style: none;
		overflow: "-moz-scrollbars-none";
		scrollbar-width: none;
	}

	.sidebar::-webkit-scrollbar {
		width: 0px;
		background-color: #f5f5f5;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
	}

	.sidebar>ul {
		height: 100%;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		height: 100vh;
		background-color: #304156;
	}

	.el-menu--collapse {
		background-color: #304156 !important;
		height: 800px !important;
	}

	.el-menu-item,
	.el-submenu__title * {
		color: #bfcbd9 !important;
	}

	.el-menu-item,
	.el-submenu__title * :hover {
		color: #bfcbd9 !important;
	}

	.el-tooltip:nth-child(2) {
		margin-left: 10px;
	}

	.el-menu-item.is-active {
		color: #409EFF !important;
	}

	.header {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		z-index: 1210;
		background: #fff;
	}

	.scrollTop {
		height: 100%;
		width: 100%;
		background-color: #f2f5f6;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 40px;
		color: #1989fa;
		font-size: 30px;
		font-weight: bolder;
	}

	.el-header {
		background: #fff;
		//
		height: 50px !important;
		text-align: center;
		line-height: 50px;
		z-index: 1210;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #dcdfe6;
	}

	.left-menu {
		display: flex;
		justify-content: flex-start;
	}

	.menu-icon-left {
		font-size: 20px;
		transition: all 0.5s;
		transform-origin: center center;
		width: 20px;
		height: 100%;
		margin-right: 15px;
	}

	.headers-left-active {
		transition: all 1s;
		transform-origin: center center;
		transform: rotate(180deg);
	}

	.right-menu-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-right: 10px;
		cursor: pointer;
		position: relative;
		z-index: 9998;
	}

	.right-menu {
		z-index: 9998;
		height: 100%;
		margin-left: 5px;
		display: flex;
		justify-content: space-around;
	}

	.el-tooltip {
		z-index: 8999;
	}

	.el-tooltip__popper.is-dark {
		z-index: 8999;
	}

	.el-icon-full-screen {
		font-size: 30px;
	}

	.el-breadcrumb {
		display: inline-block;
		font-size: 14px;
		overflow: hidden;
		line-height: 50px;
		margin-left: 10px;
	}

	.nav_container {
		height: 35px;
		width: 100%;
		background: #fff;
		border-bottom: 1px solid #d8dce5;
		box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
		// position: fixed;
		z-index: 998;
		padding: 3px 20px;
	}
</style>
